import { createVNode, render, h } from 'vue';
import start from './module/start.vue';
import { v4 as uuidv4 } from 'uuid';

export default function registerStart(lf) {

  lf.register('bpmn:startEvent', ({ HtmlNode, HtmlNodeModel }) => {
    class ConnectNode extends HtmlNode {
      setHtml(rootEl) {
        const { properties,id } = this.props.model;
        const el = document.createElement('div');
        const ssbi = properties['ssbi:customAttr'];
        properties['name'] = properties['name'] || '开始';
        // console.log(ssbi, 'ssbi', properties,'----',this.props.model);
        // const customAttr = ssbi? JSON.parse(ssbi.replaceAll("'",'"')) : {}
        const customAttr = ssbi && typeof ssbi == 'string' ? JSON.parse(ssbi.replaceAll("'", '"')) : ssbi || {};
        rootEl.innerHTML = '';
        rootEl.appendChild(el);
        const Profile = createVNode(
          h(start, {
            customAttr: customAttr,
            type: 'bpmn:startEvent',
            name: properties['name']
          })
        );

        // lf.setProperties(id, formData);
        // lf.updateText(id, '');
        render(Profile, el);
      }
    }
    class ConnectNodeModel extends HtmlNodeModel {
      setAttributes(){
        this.text.editable = false; // 禁止编辑文本
      }
      createId() {
        return 'ssbi-' + uuidv4();
      }
      initNodeData(data) {
        if (data.text) {
          data.text.value = '';
        }
        // this.text.editable = false;
        super.initNodeData(data);
        const width = 80;
        const height = 80;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [
          [width / 2, 0],
          [0, height / 2],
          [-width / 2, 0],
          [0, -height / 2]
        ];
      }

      getConnectedTargetRules() {
        const rules = super.getConnectedTargetRules();
        const notAsTarget = {
          message: '起始节点不能作为连线的终点',
          validate: () => false
        };
        rules.push(notAsTarget);
        return rules;
      }
    }
    return {
      view: ConnectNode,
      model: ConnectNodeModel
    };
  });
}
